<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--</head>-->
<!--<body>-->

<!--</body>-->
<!--</html>-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>百度地图API自定义地图</title>
    <!--引用百度地图API-->
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        .iw_poi_title {
            color: #CC5522;
            font-size: 14px;
            font-weight: bold;
            overflow: hidden;
            padding-right: 13px;
            white-space: nowrap
        }

        .iw_poi_content {
            font: 12px arial, sans-serif;
            overflow: visible;
            padding-top: 4px;
            white-space: -moz-pre-wrap;
            word-wrap: break-word
        }

        .BMap_cpyCtrl {
            display: none;
        }

        .anchorBL {
            display: none;
        }

        body {
            width: 100%;
            height: 100%;
        }
    </style>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=3.0&ak=AY44NaIKzjCQw2LUBgpc67P2U9uYKoVx"></script>
<!--    <script type="text/javascript"-->
<!--            src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>-->

</head>

<body>
<!--百度地图容器-->
<div style="width:80%;height:80%;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<div id='result'>
    经度: <input id="lng" type="text"/>
    纬度: <input id="lat" type="text"/>
    <button onclick="theLocation()"/>查询</button>
</div>
<script type="text/javascript">
//<![CDATA[
    //创建和初始化地图函数
    function initMap() {
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
    }

    //创建地图函数＿
    function createMap() {
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(115.915423, 28.681691);//定义一个中心点坐标
        map.centerAndZoom(point, 15);//设定地图的中心点和坐标并将地图显示在地图容器
        window.map = map;//将map变量存储在全局
        window.point = point;
    }

    //地图事件设置函数
    function setMapEvent() {
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom(true);//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
        map.enableScrollWheelZoom();
    }

    //地图控件添加函数：
    function addMapControl() {
          map.addControl(new BMap.NavigationControl());
    }
    // 用经纬度设置地图中心点
    function theLocation(){


    if(document.getElementById("lng").value != "" && document.getElementById("lat").value != ""){
        map.clearOverlays();
        var new_point = new BMap.Point(document.getElementById("lng").value,document.getElementById("lat").value);
        setTimeout(function(){
            var convertor = new BMap.Convertor();
            var pointArr = [];
            pointArr.push(new_point);
            convertor.translate(pointArr, 1, 5, translateCallback)
        }, 1000);



        }

     }
    //坐标转换完之后的回调函数
    translateCallback = function (data){
      if(data.status === 0) {
        var marker = new BMap.Marker(data.points[0]);
        map.addOverlay(marker);
        var label = new BMap.Label("转换后的百度坐标（正确）",{offset:new BMap.Size(20,-10)});
        marker.setLabel(label); //添加百度label
        map.setCenter(data.points[0]);
      }
    }


    initMap();//创建和初始化地图


//]]>
</script>
</html>